import { Drawer, Descriptions } from 'antd';
import React from 'react';

const Detail = function Detail({ onClose, visible, current }) {
  return (
    <Drawer
      title="详情"
      placement="right"
      onClose={onClose}
      visible={visible}
      width={500}
      bodyStyle={{ paddingBottom: 80 }}
    >
      <Descriptions column={1}>
        <Descriptions.Item label="父级">{current.pidName}</Descriptions.Item>
        <Descriptions.Item label="模块名称">{current.name}</Descriptions.Item>
        <Descriptions.Item label="模块类型">{current.typesName}</Descriptions.Item>
        <Descriptions.Item label="状态">{current.statusName}</Descriptions.Item>
        <Descriptions.Item label="URL">{current.resourceUrl}</Descriptions.Item>
        <Descriptions.Item label="图标icon">{current.icon}</Descriptions.Item>
        <Descriptions.Item label="组件ID">{current.componentsId}</Descriptions.Item>
        <Descriptions.Item label="API资源路径">{current.resourceCode}</Descriptions.Item>
        <Descriptions.Item label="端口">{current.portName}</Descriptions.Item>
        <Descriptions.Item label="包含URL">{current.containUrl}</Descriptions.Item>
        <Descriptions.Item label="备注">{current.remarks}</Descriptions.Item>
      </Descriptions>
    </Drawer>
  );
};

export default Detail;
